<template>
    <div class="static-background-tab flex flex-wrap">
        <div
            class="static-background-item w-177px h-100px"
            v-for="(pic, index) in backgroundList"
            :key="index"
        >
            <img
                :src="pic.src"
                @click="updateBackground(BackgroundTypes.STATIC, pic)"
                alt=""/>
        </div>
    </div>
</template>

<script setup>
import {useBackground} from "@/hooks/useBackground";
import {BackgroundTypes} from "@/enums/background-type.js";

const {updateBackground} = useBackground();

const backgroundList = Array.from({length: 9}, (_, i) => ({
    src: `http://localhost:5600/imgs/background-image/static/${i + 1}.jpg`,
}));
</script>

<style lang="less" scoped>
.static-background-tab {
    height: 100%;

    .static-background-item {
        margin: 0 10px 10px 0;

        img {
            width: 100%;
        }
    }
}
</style>
